<template>
	<view v-if="value" class="cxz-loading-wrap" 
		:style="[bgStyle]"
		@click.stop="() => null" @touchstart.stop="() => null">
		<view class="loading-wrap">
			<view class="round round-wrap">
				<view class="semi-circle-one round" :style="[loadingStyle]" />
				<view class="semi-circle-two" />
			</view>
			<view class="logo-imamge">
				<image :src="logo" style="width: 38px; height: 38px; border-radius: 50%;">
				</image>
			</view>
		</view>
	</view>
</template>

<script>
	/**
	 * cxz-loading
	 * @description 自定义loading组件
	 *
	 * @property {String}			logo				logo图片路径，默认路径'/static/images/logo.png'
	 * @property {String}			loadingColor				loading颜色，默认值'#2f8468'
	 * @example  <cxz-loading v-model="show"></cxz-loading>
	 */
	export default {
		name:"cxz-loading",
		props: {
			value: {
				type: Boolean,
				default: false
			},
			logo: {
				type: String,
				default: '/static/images/logo.png'
			},
			loadingColor: {
				type: String,
				default: '#2f8468'
			},
			bgColor: {
				type: String,
				default: 'rgba(0, 0, 0, 0)'
			}
		},
		computed: {
			loadingStyle() {
				const {
					loadingColor
				} = this || {};
				return {
					'border-left': `22px solid ${this.loadingColor}`
				}
			},
			bgStyle() {
				return {
					'background-color': this.bgColor
				}
			}
		},
	}
</script>

<style lang="scss" scoped>
	/* loading默认颜色 */
	// $loading-color: #2f8468;
	/* loading默认背景颜色 */
	$loading-bg-color: rgba(0, 0, 0, 0);
	/* logo半径 */
	$logo-size: 20px;
	$circle-r-1: $logo-size + 2px;
	$circle-r-2: $logo-size + 3px;

	@mixin xz-flex {
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.cxz-loading-wrap {
		transition: all 0.8 ease-out;
		position: fixed;
		z-index: 9999;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		display: flex;
		justify-content: center;

		.loading-wrap {
			padding-bottom: 25vh;
			position: relative;
			@include xz-flex;

			.round-wrap {
				position: relative;
				@include xz-flex;
			}

			.semi-circle-one {
				// border-left: $circle-r-1 solid $loading-color;
				border-right: $circle-r-1 solid $loading-bg-color;
				border-top: $circle-r-1 solid $loading-bg-color;
				border-bottom: $circle-r-1 solid $loading-bg-color;
				border-radius: 50%;
			}

			.semi-circle-two {
				border-left: $circle-r-2 solid rgba(0, 0, 0, 0);
				border-right: $circle-r-2 solid $loading-bg-color;
				border-top: $circle-r-2 solid rgba(0, 0, 0, 0);
				border-bottom: $circle-r-2 solid $loading-bg-color;
				border-radius: 50%;
				// transform: rotate(40deg);
				position: absolute;
			}

			.logo-imamge {
				box-sizing: border-box;
				height: 2*$logo-size;
				width: 2*$logo-size;
				background-color: #fff;
				border-radius: 50%;
				position: absolute;
				@include xz-flex;
			}
		}

		.round {
			animation: round 1.7s infinite ease;
		}

		@keyframes round {
			0% {
				transform: rotate(0deg);
				/* 开始旋转 div 元素 */
			}

			100% {
				transform: rotate(360deg);
				/* 结束旋转 div 元素 */
			}
		}
	}
</style>